<template>
  <div class="app-container">
    <!-- <h2 style="text-align: center;">发布新课程</h2> -->
    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="最终发布" />
    </el-steps>

    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写" />
      </el-form-item>

      <!-- 所属分类 TODO -->
      <el-form-item label="课程分类">
        <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="subjectLevelOneChanged">
          <el-option v-for="subject in subjectOneList" :key="subject.id" :label="subject.title" :value="subject.id" />
        </el-select>&nbsp;

        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
          <el-option v-for="subject in subjectTwoList" :key="subject.id" :label="subject.title" :value="subject.id" />
        </el-select>
      </el-form-item>

      <!-- 课程讲师 TODO -->
      <el-form-item label="课程讲师">
        <el-select v-model="courseInfo.teacherId" placeholder="请选择">
          <el-option v-for="teacher in teacherList" :key="teacher.id" :label="teacher.name" :value="teacher.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="总课时">
        <el-input-number v-model="courseInfo.lessonNum" :min="0" controls-position="right" placeholder="请填写课程的总课时数" />
      </el-form-item>
      <!-- 课程简介 TODO -->
      <el-form-item label="课程简介">
        <el-input v-model="courseInfo.description" placeholder=" " />
      </el-form-item>

      <!-- 课程封面 TODO -->
      <el-form-item label="课程封面">
        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="BASE_API+'/eduoss/fileoss'"
          class="avatar-uploader"
        >
          <img v-if="courseInfo.cover" :src="courseInfo.cover">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>

      <el-form-item label="课程价格">
        <el-input-number v-model="courseInfo.price" :min="0" controls-position="right" placeholder="免费课程请设置为0元" /> 元
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>

import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
import avatar from 'element-ui/packages/avatar'

export default {
  data() {
    return {
      saveBtnDisabled: false,
      courseId: '',
      courseInfo: {
        title: '',
        teacherId: '',
        lessonNum: 0,
        description: '',
        cover: '',
        price: 0,
        subjectParentId: '', // 一级分类ID
        subjectId: '' // 二级分类ID
      },
      teacherList: [],
      subjectOneList: [], // 一级分类
      subjectTwoList: [], // 二级分类
      BASE_API: process.env.VUE_APP_BASE_API
    }
  },
  computed: {
    avatar() {
      return avatar
    }
  },
  created() {
    this.getListTeacher()
    this.getOneSubject()
    // 获取路由里面的id
    if (this.$route.params && this.$route.params.id) {
      this.courseId = this.$route.params.id
      this.getInfo()
    }

  },
  methods: {
    // 根据课程id查询
    getInfo() {
      course.getCourseInfoId(this.courseId)
        .then(res => {
          this.courseInfo = res.data.courseInfoVo
          for (let i = 0; i < this.subjectOneList.length; i++) {
            // 每个一级分类
            const oneSubject = this.subjectOneList[i]
            // 判断：所有一级分类的id 和 点击一级分类的id是否一样
            if (this.courseInfo.subjectParentId === oneSubject.id) {
              this.subjectTwoList = oneSubject.children
            }
          }
        })
    },
    // 上传封面成功调用方法
    handleAvatarSuccess(res, file) {
      this.courseInfo.cover = res.data.url
    },
    // 上传之前调用方法
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$notify.error('上传头像只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$notify.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 点击某一级分类，出发change，显示对应的二级分类
    subjectLevelOneChanged(value) {
      // value就是一级分类的id值
      // 遍历所有分类，包含一级二级
      for (let i = 0; i < this.subjectOneList.length; i++) {
        // 每个一级分类
        const oneSubject = this.subjectOneList[i]
        // 判断：所有一级分类的id 和 点击一级分类的id是否一样
        if (value === oneSubject.id) {
          this.subjectTwoList = oneSubject.children
        }
      }
      this.courseInfo.subjectId = ''
    },
    // 查询所有一级分类
    getOneSubject() {
      subject.getSubjectList()
        .then(res => {
          this.subjectOneList = res.data.list
        })
    },
    // 查询所有讲师
    getListTeacher() {
      course.getListTeacher()
        .then(res => {
          this.teacherList = res.data.items
          // console.log(res)
        })
    },
    addCourse() {
      course.addCourseInfo(this.courseInfo)
        .then(res => {
          // 提示信息
          this.$notify({
            type: 'success',
            message: '添加课程信息成功'
          })
          // 跳转到第二步
          this.$router.push({ path: '/course/chapter/' + res.data.courseId })
          // console.log(res)
        })
    },
    updateCourse() {
      course.updateCourseInfoId(this.courseInfo)
        .then(res => {
          // 提示信息
          this.$notify({
            type: 'success',
            message: '修改课程信息成功'
          })
          // 跳转到第二步
          this.$router.push({ path: '/course/chapter/' + this.courseId })
        })
    },
    saveOrUpdate() {
      return (this.courseInfo.id) ? this.updateCourse() : this.addCourse()
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
